<!-- 操作人输入匹配框 -->
<template>
  <el-autocomplete
    v-model="iptVal"
    :fetch-suggestions="querySearch"
    :trigger-on-focus="false"
    clearable
    :placeholder="placeholder"
    :value-key="valueKey"
    @blur="handleBlur"
    @select="handleSelect"
  />
</template>

<script setup name="InputAutocomplete">
import { getMatchList } from "@/api/common";

const props = defineProps({
  placeholder: String,
  search_type: String,
  valueKey: {
    type: String,
    default: "value"
  }
});

const iptVal = defineModel("");
const emits = defineEmits(["onSelect"]);

const querySearch = async (queryString, cb) => {
  const res = await getMatchList({
    search_key: queryString,
    search_type: props.search_type
  });
  const arr = (res.data || []).map((item) => {
    return { ...item, value: item.name };
  });
  cb(arr);
};

const handleSelect = (item) => {
  emits("onSelect", item.id);
};
const handleBlur = (e) => {
  emits("onSelect", e.target.value);
};
</script>
